<template>
	<div>
		<u-popup :show="show2" mode="center" @touchmove.stop.prevent="moveHandle">
			<view class="box-tk">
				<view class="view1" v-if="checkitem.length > 20">{{checkitem}}</view>
				<view class="view1" v-else style="line-height: 45px;text-align: center;">{{checkitem}}</view>
				<view class="xian"></view>
				<view class="box-xis">
					<view class="xis-title">
						{{reportList[0]}}
					</view>

					<view class="box-img"></view>
					<view class="xis-hend">
						<view class="hend-title" v-for="(item,index) in reportList" :key="index"
							v-if="index>0 && item!=''">
							{{item.replace(/d/g,"\n")}}
						</view>
					</view>
				</view>
				<view class="tk-heard">
					<u-button type="primary" text="取消" class="btn1" style="width: 100%;" color="#FF6E91"
						@tap="cancelslitup"></u-button>
				</view>
			</view>
		</u-popup>
	</div>
</template>

<script>
	export default {
		props: {
			show2: {
				type: Boolean,
				default: false
			},
			reportList: {
				type: Array,
				default: []
			},
			checkitem: {
				type: String,
				default: ''
			}
		},

		data() {
			return {
				// show2: true
			}
		},
		methods: {
			moveHandle() {},
			cancelslitup() {
				this.$emit('reportShow', false);
				// this.show2 = false
			},

		}
	}
</script>


<style scoped lang="scss">
	.box-tk {
		width: 670rpx;
		// height: 212rpx;
		// background: #FFFFFF;
		border-radius: 8rpx;
		position: relative;
		padding-bottom: 20rpx;

		.view1 {
			font-size: 36rpx;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #333333;
			height: 45px;
			// line-height: 45px;
			// text-align: center;
			white-space: break-spaces;
			padding: 0 6px;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.xian {
			position: absolute;
			width: 100%;
			height: 2rpx;
			background: #7AD9DF;
			left: 0;
			top: 96rpx;
			// opacity: 0.19;
			// opacity: 0.19;
			// margin: 14rpx 0;
		}

		.box-xis {
			width: 97%;
			// height: 262px;
			background: #B0E9EC;
			margin: 20rpx auto 0;
			padding-bottom: 12rpx;
			position: relative;
			border-radius: 12rpx;

			.box-img {
				position: absolute;
				right: 0;
				top: 0;
				width: 58px;
				height: 28px;
				background: url('../../static/img/coagulation.svg') no-repeat;
				background-size: 100% auto;
				box-shadow: 3px -1px 8px 0px #D4D9D9;
			}

			.xis-title {
				font-size: 16px;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #333333;
				padding: 4rpx 12rpx;
				line-height: 24px;
			}

			.xis-hend {
				// width: 303px;
				height: 300px;
				width: 96%;
				margin: 0 auto;
				// height: 228px;
				background: #F6FEFF;
				border-radius: 6px;
				opacity: 0.95;
				overflow-y: scroll;

				text {
					font-size: 32rpx;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					font-weight: 500;
					color: #333333;
					line-height: 48rpx;
				}

				.hend-title {
					font-size: 32rpx;
					font-family: SourceHanSansCN-Medium, SourceHanSansCN;
					// font-weight: 500;
					color: #333333;
					line-height: 48rpx;
					padding: 20rpx;

					&:nth-child(-n+4) {
						padding-bottom: 0;
					}
				}
			}
		}

		.tk-heard {
			display: flex;
			// height: calc(100% - 636rpx);
			align-items: center;
			margin: 16rpx auto 0;
			width: 97%;
		}

		.tk-heard ::v-deep {
			.u-button__text {
				font-size: 36rpx !important;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 54rpx;
				letter-spacing: 28rpx;
			}
		}
	}

	.btn1 {
		box-shadow: 0px 2px 6px 0px #ff6e91;
	}
</style>
